<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
import { useRouter } from 'vue-router';
const router = useRouter();
function goNews() {
  router.push("/news?mykey=luckey");
}


</script>

<template>
  <div class="app">
    <h2>一、element plus 组件</h2>
    <h3>1.基础组件</h3>
    <h4>(1). 按钮</h4>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/button1" class="router-link select"style="margin: 20px; padding: 20px">基础用法</RouterLink>
      <RouterLink to="/button2" class="router-link select" style="margin: 20px; padding: 20px">禁用状态</RouterLink>
      <RouterLink to="/button3" class="router-link select" style="margin: 20px; padding: 20px">链接按钮</RouterLink>
      <RouterLink to="/button4" class="router-link select" style="margin: 20px; padding: 20px">文字按钮</RouterLink>
      <RouterLink to="/button5" class="router-link select" style="margin: 20px; padding: 20px">图标按钮</RouterLink>
      <RouterLink to="/button6" class="router-link select" style="margin: 20px; padding: 20px">按钮组</RouterLink>
      <RouterLink to="/button7" class="router-link select" style="margin: 20px; padding: 20px">加载状态按钮</RouterLink>
      <RouterLink to="/button8" class="router-link select" style="margin: 20px; padding: 20px">调整尺寸</RouterLink>
      <RouterLink to="/button9" class="router-link select" style="margin: 20px; padding: 20px">Tag</RouterLink>
      <RouterLink to="/button10" class="router-link select" style="margin: 20px; padding: 20px">自定义颜色</RouterLink>
      <RouterLink to="/button11" class="router-link select" style="margin: 20px; padding: 20px">Button API</RouterLink>
      <RouterLink to="/button12" class="router-link select" style="margin: 20px; padding: 20px">ButtonGroup API</RouterLink>
      <RouterLink to="/news?mykey=luckey" active-class="select" style="margin: 20px; padding: 20px">新闻</RouterLink>
      <el-button @click="goNews" active-class="select" style="margin: 20px; padding: 20px" type="primary">跳转新闻</el-button>
    </div>
    <!-- 展示区 -->
    <!-- <div class="main-content">
      <RouterView></RouterView>
    </div> -->
  </div>
</template>

<style scoped>
. base-style {
  margin: 20px;
  padding: 20px;
}

. router-link {
  @extend .base-style;
}

.main-content {
  @extend .base-style;
  margin-top: 50px;
  padding: 20px;
}

.select {
  @extend .base-style;
  color: blue; /* 默认字体颜色 */
  transition: color 0.3s ease; /* 平滑过渡效果 */
}

.select:hover {
  color: red; /* 悬停时字体颜色 */
}
</style>
